<template>
    <div class="container">
        <h4>个人资料</h4>
        <van-form @submit="onSubmit" >
            <van-cell-group>
                <van-field name="phone" disabled v-model="userInfo.phone" label="手机号" placeholder="手机号" />
                <van-field name="name" v-model="userInfo.name" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请输入姓名' }]" />
                <van-field name="nickname" disabled v-model="userInfo.nickname" label="昵称" placeholder="昵称" :rules="[{ required: true, message: '请输入昵称' }]" />
                <van-field v-model="userInfo.age" type="number" name="age" label="年龄" placeholder="年龄" :rules="[{ required: true, message: '请输入年龄' }]" />
                <van-field name="sex" label="性别">
                    <template #input>
                        <van-radio-group v-model="userInfo.sex" direction="horizontal">
                            <van-radio :name="1">男</van-radio>
                            <van-radio :name="0">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <!-- <van-field name="type" label="角色">
                    <template #input>
                        <van-radio-group v-model="userInfo.type" direction="horizontal">
                            <van-radio :name="1">管理员</van-radio>
                            <van-radio :name="2">员工</van-radio>
                            <van-radio :name="3">客户</van-radio>
                        </van-radio-group>
                    </template>
                </van-field> -->
                <template v-if="userInfo.type == 2">
                    <van-field type="textarea" rows="1" autosize name="financialPosition" v-model="userInfo.financialPosition" label="理财职称" placeholder="理财职称" />
                    <van-field type="textarea" rows="1" autosize name="fortuneIdea" v-model="userInfo.fortuneIdea" label="财富理念" placeholder="财富理念" />
                    <van-field type="textarea" rows="1" autosize name="fortuneExperience" v-model="userInfo.fortuneExperience" label="财富履历" placeholder="财富履历" />
                    <van-field readonly label="理财经理标签">
                        <template #input>
                            <div v-if="tagList.length > 0">
                                <van-tag
                                    v-for="(tag, index) in tagList"
                                    :key="index + new Date().getTime()"
                                    closeable
                                    size="medium"
                                    type="primary"
                                    @close="tagList.splice(index, 1)"
                                    style="margin-left: 5px"
                                >
                                    {{ tag }}
                                </van-tag>
                            </div>
                        </template>
                        <template #button>
                            <van-button @click="tagPop = true" size="small" native-type="button" type="primary" icon="plus">添加标签</van-button>
                        </template>
                    </van-field>
                </template>
            </van-cell-group>
            <div class="btn">
                <van-button :loading="isLoading" loading-text="保存中..." type="primary" native-type="submit"> 保存 </van-button>
            </div>
        </van-form>
        <van-popup round v-model="tagPop">
            <div class="pop-container">
                <van-field v-model="tagName" label="标签名称" placeholder="标签最多4个字符" :maxlength="4" />
                <div class="btn-box">
                    <van-button :disabled="!tagName" size="small" type="primary" @click="addTag">保存</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { update, getDetail } from "@/api/userInfo";
    import { Toast, Dialog } from "vant";
    import { phoneValidator } from "@/utils/validator";

    export default {
        data() {
            return {
                phoneValidator,
                userInfo: {},
                isLoading: false,
                tagPop: false,
                tagName: "",
                tagList: [],
            };
        },
        async mounted() {
            if (this.$getUserInfo()) {
                const userInfo = this.$getUserInfo();
                let res = await getDetail({
                    id: userInfo.id,
                });
                if (!this.$_.isEmpty(res)) {
                    this.userInfo = res;
                    if (res.financialTag) {
                        let tagList = res.financialTag.split(",");
                        this.tagList = tagList;
                    }
                    this.$setUserInfo({
                        ...userInfo,
                        ...res,
                    });
                }
            }
        },
        methods: {
            async onSubmit(values) {
                let _this = this,
                    { id } = this.userInfo;
                if (!values.phone) {
                    Dialog.confirm({
                        title: "提示",
                        message: "您尚未绑定手机号，无法获取相关订单！",
                        confirmButtonText: "立即绑定",
                    })
                        .then(function () {
                            _this.$router.push("/bindPhone");
                        })
                        .catch(() => {
                            // on cancel
                        });
                    return;
                }
                this.isLoading = true;
                let res = await update({
                    id,
                    ...values,
                    financialTag: this.tagList.join(","),
                });
                if (res.code === 1) {
                    let userInfo = this.userInfo;
                    _this.$setUserInfo({
                        ...userInfo,
                        ...values,
                    });
                    Toast.success("保存成功！");
                    setTimeout(() => {
                        _this.$router.go(-1);
                    }, 2000);
                }
                this.isLoading = false;
            },
            addTag() {
                let name = this.tagName,
                    tagList = this.tagList;
                tagList.push(name);
                this.tagList = tagList;
                this.tagName = "";
                this.tagPop = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        background: #fff;
        min-height: 100%;
        color: #333;
        box-sizing: border-box;
        padding: 30px 0;
        & > h4 {
            margin: 0 20px 20px;
        }
        .info-title {
            font-weight: bo;
        }
        .item {
            margin-top: 10px;
        }
        .btn {
            // position: fixed;
            // bottom: 0;
            width: 60%;
            margin: 30px auto;
            button {
                width: 100%;
                border-radius: 30px;
            }
        }
    }
    .pop-container {
        margin: 20px auto;
        min-width: 300px;
        .btn-box {
            margin: 20px;
        }
    }
</style>